<html><head><meta charset="utf-8"><title>使用命名空间封装代码-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/35" target="_blank">零基础学透 TypeScript</a>
                    <a href="" target="_blank">
                        <span>
                            / 4-2 使用命名空间封装代码
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                使用命名空间封装代码
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-07-10 14:36:27
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img3.mukewang.com/5d244e6000010c7a06400359.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">理想必须要人们去实现它，它不但需要决心和勇敢而且需要知识。<p class="author">——吴玉章</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">命名空间在 1.5 之前的版本中，是叫做“内部模块”。在 1.5 版本之前，ES6 模块还没正式成为标准，所以 TS 对于模块的实现，是将模块分为“内部模块”和“外部模块”两种。内部模块使用<code>module</code>来定义，而外部模块使用<code>export</code>来指定哪个内容对外部可见。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">1.5 版本开始，使用“命名空间”代替“内部模块”说法，并且使用 <code>namespace</code> 代替原有的 <code>module</code>关键字，而“外部 模块”则改为“模块”。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">命名空间的作用与使用场景和模块还是有区别的：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">当我们是在程序内部用于防止全局污染，想把相关的内容都放在一起的时候，使用命名空间；</li>
<li style="font-size: 20px; line-height: 38px;">当我们封装了一个工具或者库，要适用于模块系统中引入使用时，适合使用模块。</li>
</ul>
</div><div class="cl-preview-section"><h3 id="定义和使用">4.2.1 定义和使用</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">命名空间的定义实际相当于定义了一个大的对象，里面可以定义变量、接口、类、方法等等，但是如果不使用<code>export</code> 关键字指定此内容要对外可见的话，外部是没法访问到的。来看下怎么写，我们想要把所有涉及到内容验证的方法都放到一起，文件名叫 validation.ts：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">namespace</span> Validation <span class="token punctuation">{</span>
  <span class="token keyword">const</span> isLetterReg <span class="token operator">=</span> <span class="token regex">/^[A-Za-z]+$/</span><span class="token punctuation">;</span> <span class="token comment">// 这里定义一个正则</span>
  <span class="token keyword">export</span> <span class="token keyword">const</span> isNumberReg <span class="token operator">=</span> <span class="token regex">/^[0-9]+$/</span><span class="token punctuation">;</span> <span class="token comment">// 这里再定义一个正则，与isLetterReg的区别在于他使用export导出了</span>
  <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">checkLetter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>text<span class="token punctuation">:</span> <span class="token keyword">any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> isLetterReg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们创建了一个命名空间叫做 <code>Validation</code>，它里面定义了三个内容，两个正则表达式，但是区别在于 isLetterReg 没有使用 export 修饰，而 isNumberReg 使用了 export 修饰。最后一个函数，也是用了 export 修饰。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这里要说明一点的是，命名空间在引入的时候，如果是使用 tsc 命令行编译文件，比如是在<em>index.ts</em>文件使用这个命名空间，先直接像下面这样写：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token comment">/// &lt;reference path="validation.ts"/&gt;</span>
<span class="token keyword">let</span> isLetter <span class="token operator">=</span> Validation<span class="token punctuation">.</span><span class="token function">checkLetter</span><span class="token punctuation">(</span><span class="token string">"sdfsd"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> reg <span class="token operator">=</span> Validation<span class="token punctuation">.</span>isNumberReg<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>isLetter<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">来解释下，命名空间如果不是使用 webpack 等工具编译，而是使用 tsc 编译，那只需要在使用外部命名空间的地方使用<code>/// &lt;reference path=“namespace.ts”/&gt;</code>来引入，注意三斜线 ”///“ 开头，然后在 path 属性指定相对于当前文件，这个命名空间文件的路径。然后编译时，需要指定一个参数<code>outFile</code>，这个参数来制定输出的文件名：</p>
</div><div class="cl-preview-section"><pre class="  language-shell"><code class="prism  language-shell">tsc --outFile src/index.js src/index.ts
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">–outFile 用来指定输出的文件路径和文件名，最后指定要编译的文件。还有一点要注意，使用 outFile 只支持<code>amd</code>和<code>system</code>两种模块标准，所以需要在<em>tsconfig.json</em>里，设置 module 编译选项。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">来看下编译后的文件 index.js：</p>
</div><div class="cl-preview-section"><pre class="  language-javascript"><code class="prism  language-javascript"><span class="token keyword">var</span> Validation<span class="token punctuation">;</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>Validation<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> isLetterReg <span class="token operator">=</span> <span class="token regex">/^[A-Za-z]+$/</span><span class="token punctuation">;</span>
  Validation<span class="token punctuation">.</span>isNumberReg <span class="token operator">=</span> <span class="token regex">/^[0-9]+$/</span><span class="token punctuation">;</span>
  Validation<span class="token punctuation">.</span><span class="token function-variable function">checkLetter</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> isLetterReg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>Validation <span class="token operator">||</span> <span class="token punctuation">(</span>Validation <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/// &lt;reference path="namespace.ts"/&gt;</span>
<span class="token keyword">var</span> isLetter <span class="token operator">=</span> Validation<span class="token punctuation">.</span><span class="token function">checkLetter</span><span class="token punctuation">(</span><span class="token string">"sdfsd"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> reg <span class="token operator">=</span> Validation<span class="token punctuation">.</span>isNumberReg<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>isLetter<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">可以看到，编译后的 JS 文件将命名空间定义的文件 Validation.ts 文件的内容和 index.ts 的内容合并到了最后输出的文件。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">如果我们要在 webpack 等工具中开发项目，并时时运行，如果只通过<code>/// &lt;reference path=“Validation.ts”/&gt;</code>来引入命名空间，你会发现运行起来之后，浏览器控制台会报 <strong>Validation is not defined</strong> 的错误。所以如果是要在项目中时时使用，需要使用 export 将命名空间导出，其实就是作为模块导出，然后在 index.ts 中引入，先来看 Validation.ts 文件：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">export</span> <span class="token keyword">namespace</span> Validation <span class="token punctuation">{</span>
  <span class="token keyword">const</span> isLetterReg <span class="token operator">=</span> <span class="token regex">/^[A-Za-z]+$/</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">const</span> isNumberReg <span class="token operator">=</span> <span class="token regex">/^[0-9]+$/</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">checkLetter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>text<span class="token punctuation">:</span> <span class="token keyword">any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> isLetterReg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">然后在 index.ts 文件中引入并使用：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">import</span> <span class="token punctuation">{</span> Validation <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./Validation.ts"</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> isLetter <span class="token operator">=</span> Validation<span class="token punctuation">.</span><span class="token function">checkLetter</span><span class="token punctuation">(</span><span class="token string">"sdfsd"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> reg <span class="token operator">=</span> Validation<span class="token punctuation">.</span>isNumberReg<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>isLetter<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// /^[0-9]+$/</span>
</code></pre>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">这里要提醒大家的是，命名空间本来就是防止变量污染，但是模块也能起到这个作用，而且使用模块还可以自己定义引入之后的名字。所以，并不建议导出一个命名空间，这种情况你应该是用模块。</p>
</blockquote>
</div><div class="cl-preview-section"><h3 id="拆分为多个文件">4.2.2 拆分为多个文件</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">随着内容不断增多，我们可以将同一个命名空间拆成多个文件分开维护，尽管分成了多个文件，但它们仍然是同一个命名空间。下面我们将 Validation.ts 拆开成 LetterValidation.ts 和 NumberValidation.ts：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token comment">// LetterValidation.ts</span>
<span class="token keyword">namespace</span> Validation <span class="token punctuation">{</span>
  <span class="token keyword">export</span> <span class="token keyword">const</span> isLetterReg <span class="token operator">=</span> <span class="token regex">/^[A-Za-z]+$/</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">checkLetter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>text<span class="token punctuation">:</span> <span class="token keyword">any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> isLetterReg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// NumberValidation.ts</span>
<span class="token keyword">namespace</span> Validation <span class="token punctuation">{</span>
  <span class="token keyword">export</span> <span class="token keyword">const</span> isNumberReg <span class="token operator">=</span> <span class="token regex">/^[0-9]+$/</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">checkNumber</span> <span class="token operator">=</span> <span class="token punctuation">(</span>text<span class="token punctuation">:</span> <span class="token keyword">any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> isNumberReg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// index.ts</span>
<span class="token comment">/// &lt;reference path="./LetterValidation.js"/&gt;</span>
<span class="token comment">/// &lt;reference path="./NumberValidation.js"/&gt;</span>
<span class="token keyword">let</span> isLetter <span class="token operator">=</span> Validation<span class="token punctuation">.</span><span class="token function">checkLetter</span><span class="token punctuation">(</span><span class="token string">"sdfsd"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> reg <span class="token operator">=</span> Validation<span class="token punctuation">.</span>isNumberReg<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>isLetter<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们使用命令行来编译一下：</p>
</div><div class="cl-preview-section"><pre class="  language-shell"><code class="prism  language-shell">tsc --outFile src/index.js src/index.ts
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">最后输出的 index.js 文件是这样的：</p>
</div><div class="cl-preview-section"><pre class="  language-javascript"><code class="prism  language-javascript"><span class="token keyword">var</span> Validation<span class="token punctuation">;</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>Validation<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  Validation<span class="token punctuation">.</span>isLetterReg <span class="token operator">=</span> <span class="token regex">/^[A-Za-z]+$/</span><span class="token punctuation">;</span>
  Validation<span class="token punctuation">.</span><span class="token function-variable function">checkLetter</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> Validation<span class="token punctuation">.</span>isLetterReg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>Validation <span class="token operator">||</span> <span class="token punctuation">(</span>Validation <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> Validation<span class="token punctuation">;</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>Validation<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  Validation<span class="token punctuation">.</span>isNumberReg <span class="token operator">=</span> <span class="token regex">/^[0-9]+$/</span><span class="token punctuation">;</span>
  Validation<span class="token punctuation">.</span><span class="token function-variable function">checkNumber</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> Validation<span class="token punctuation">.</span>isNumberReg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>Validation <span class="token operator">||</span> <span class="token punctuation">(</span>Validation <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/// &lt;reference path="./LetterValidation.ts"/&gt;</span>
<span class="token comment">/// &lt;reference path="./NumberValidation.ts"/&gt;</span>
<span class="token keyword">var</span> isLetter <span class="token operator">=</span> Validation<span class="token punctuation">.</span><span class="token function">checkLetter</span><span class="token punctuation">(</span><span class="token string">"sdfsd"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> reg <span class="token operator">=</span> Validation<span class="token punctuation">.</span>isNumberReg<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>isLetter<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">可以看到，我们使用 reference 引入的两个命名空间都被编译在了一个文件，而且是按照引入的顺序编译的。我们先引入的是 LetterValidation，所以编译后的 js 文件中，LetterValidation 的内容在前面。而且看代码可以看出，两个验证器最后都合并到了一起，所以 Validation 对象有两个正则表达式，两个方法。</p>
</div><div class="cl-preview-section"><h3 id="别名">4.2.3. 别名</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们使用 import 给常用的对象起一个别名，但是要注意，这个别名和类型别名不是一回事，而且这儿的 import 也只是为了创建别名不是引入模块。来看怎么使用，这是官方文档的原始例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">namespace</span> Shapes <span class="token punctuation">{</span>
  <span class="token keyword">export</span> <span class="token keyword">namespace</span> Polygons <span class="token punctuation">{</span>
    <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">Triangle</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">Squaire</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">import</span> polygons <span class="token operator">=</span> Shapes<span class="token punctuation">.</span>Polygons<span class="token punctuation">;</span> <span class="token comment">// 使用 import 关键字给 Shapes.Polygons 取一个别名polygons</span>
<span class="token keyword">let</span> sq <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">polygons<span class="token punctuation">.</span>Square</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">通过这个例子我们可以看到，使用 import 关键字来定义命名空间中某个输出元素的别名，可以减少我们深层次获取属性的成本。</p>
</div><div class="cl-preview-section"><h3 id="小结">小结</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节我们学习了如何使用命名空间来封装逻辑相似的代码块，来提高复用性且避免命名污染。我们学习了命名空间的基本定义和使用，使用<code>namespace</code>来定义命名空间，形式和定义接口很像，只不过是使用namespace来定义，而且在命名空间内可以定义任何内容。需要提供给外部使用的内容，需要使用<code>export</code>关键字指出，外部才能访问到。我们还可以将一个命名空间拆分成多个文件，这种适合逻辑较多，放到同一个文件内内容较多的情况。最后我们还学习了使用别名，来给命名空间内的某个命名空间起一个别名，减少访问多级嵌套的属性的访问成本。最后我们要说的一点是，基本上我们是可以使用模块来代替命名空间的，所以我们应该尽量使用模块来封装代码。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下个小节我们将学习声明合并，编译器会对多个文件中、同一个文件中声明的同名的一些内容进行合并，我们下个小节来进行学习。<br>
<img src="http://img.mukewang.com/5d22b97100015bb216000567.jpg" alt="图片描述" data-original="http://img.mukewang.com/5d22b97100015bb216000567.jpg" class="" style="cursor: pointer;"></p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/363">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    使用模块封装代码
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/365">
                                                    <div class="next r clearfix">
                                <p>
                                    对声明合并的爱与恨
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">
        </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>